<template>
  <div class="profile-page">
    <h2>个人中心</h2>
    <div class="stats">
      <div>总题数：{{ total }}</div>
      <div>已做题数：{{ doneCount }}</div>
      <div>正确率：{{ correctRate }}%</div>
      <div>收藏题数：{{ favorites.length }}</div>
      <div>错题数：{{ wrongs.length }}</div>
    </div>
    <h3>收藏夹</h3>
    <ul>
      <li v-for="q in favoriteQuestions" :key="q.id">{{ q.question }}</li>
      <li v-if="favoriteQuestions.length === 0">暂无收藏</li>
    </ul>
    <h3>错题本</h3>
    <ul>
      <li v-for="q in wrongQuestions" :key="q.id">{{ q.question }}</li>
      <li v-if="wrongQuestions.length === 0">暂无错题</li>
    </ul>
  </div>
</template>

<script>
import questions from '../api/mockQuestions';
function getLocal(key, def) {
  try {
    return JSON.parse(localStorage.getItem(key)) || def;
  } catch {
    return def;
  }
}
export default {
  name: 'ProfilePage',
  data() {
    return {
      questions,
      favorites: getLocal('favorites', []),
      wrongs: getLocal('wrongs', []),
      answerRecord: getLocal('answerRecord', {}),
    };
  },
  computed: {
    total() {
      return this.questions.length;
    },
    doneCount() {
      return Object.keys(this.answerRecord).length;
    },
    correctCount() {
      return Object.values(this.answerRecord).filter(r => r.correct).length;
    },
    correctRate() {
      if (!this.doneCount) return 0;
      return ((this.correctCount / this.doneCount) * 100).toFixed(1);
    },
    favoriteQuestions() {
      return this.questions.filter(q => this.favorites.includes(q.id));
    },
    wrongQuestions() {
      return this.questions.filter(q => this.wrongs.includes(q.id));
    },
  },
};
</script>

<style scoped>
.profile-page {
  max-width: 700px;
  margin: 32px auto;
  padding: 32px 24px 24px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
}
.stats {
  margin-bottom: 32px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.stats > div {
  background: #f7f8fa;
  border-radius: 10px;
  padding: 18px 28px;
  font-size: 17px;
  color: #1976d2;
  font-weight: 600;
  min-width: 120px;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.06);
  text-align: center;
}
h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  color: #222;
  font-size: 18px;
  font-weight: bold;
}
ul {
  margin-bottom: 16px;
  padding-left: 0;
  list-style: none;
}
ul li {
  background: #f7f8fa;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px 16px;
  color: #444;
  font-size: 15px;
  box-shadow: 0 1px 4px 0 rgba(64,158,255,0.04);
}
ul li:last-child {
  margin-bottom: 0;
}
ul li:empty {
  display: none;
}
@media (max-width: 700px) {
  .profile-page {
    padding: 16px 4vw;
    border-radius: 0;
    box-shadow: none;
  }
  .stats > div {
    min-width: 90px;
    padding: 12px 8px;
    font-size: 15px;
  }
}
</style> 